@page "/circular-gauge/pointer-customization"

@using Syncfusion.Blazor.CircularGauge

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the different types of pointers which are available in the gauge.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to customize the pointer for an axis in the circular gauge. Circular gauge supports different types of pointers like marker, image, needle, range bar.</p>
   <p> More information on the pointer customization can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/circular-gauge/pointers'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="row">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px" CenterY="40%">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="270" EndAngle="90" Radius="90%" Minimum="0" Maximum="100">
                                <CircularGaugeAxisLineStyle Width="3" Color="#01aebe"/>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="1" Height="0.01" Interval="100"/>
                                <CircularGaugeAxisMinorTicks Width="0.01" Height="0.01"/>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Radius="100%" Value="80" Type="PointerType.Marker" MarkerShape="GaugeShape.InvertedTriangle" MarkerWidth="15" MarkerHeight="15" Color="rgb(0,171,169)"/>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="20%">
                                        <ContentTemplate>
                                            <div class="annotationText" style="margin-left:-65%">Marker</div>
                                        </ContentTemplate>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px" CenterY="40%">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="270" EndAngle="90" Radius="90%" Minimum="0" Maximum="100">
                                <CircularGaugeAxisLineStyle Width="3" Color="#ff5985"/>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="1" Height="0.01" Interval="100"/>
                                <CircularGaugeAxisMinorTicks Height="0.01" Width="0.01"/>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Value="66" Radius="90%" Type="PointerType.RangeBar" PointerWidth="10" Color="#ff5985">
                                        <CircularGaugePointerAnimation Enable="true" Duration="1000"/>
                                    </CircularGaugePointer>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="28%" >
                                        <ContentTemplate>
                                            <div class="annotationText" style="margin-left:-30px">Range Bar</div>
                                        </ContentTemplate>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px" CenterY="40%" @ref="NeedleRef">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="270" EndAngle="90" Radius="90%" Minimum="0" Maximum="100">
                                <CircularGaugeAxisLineStyle Width="3" Color="#9250e6"/>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="1" Height="0.01" Interval="100"/>
                                <CircularGaugeAxisMinorTicks Height="0.01" Width="0.01"/>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Value="@NeedlePointer" Radius="100%" Color="#923C99" PointerWidth="6">
                                        <CircularGaugeCap Radius="0.01"/>
                                        <CircularGaugeNeedleTail Length="4%" Color="#923C99"/>
                                        <CircularGaugePointerAnimation Enable="false" Duration="900"/>
                                    </CircularGaugePointer>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="20%">
                                        <ContentTemplate>
                                            <div class="annotationText" style="margin-left:-40%">Needles</div>
                                        </ContentTemplate>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px" CenterY="40%">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="270" EndAngle="90" Radius="90%" Minimum="0" Maximum="100">
                                <CircularGaugeAxisLineStyle Width="3" Color="#1E7145"/>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="#1E7145"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="1" Height="0.01" Interval="100"/>
                                <CircularGaugeAxisMinorTicks Height="0.01" Width="0.01"/>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Value="80" Radius="80%" Color="green" PointerWidth="2" NeedleStartWidth="4" NeedleEndWidth="4">
                                        <CircularGaugePointerAnimation Enable="true" Duration="1000"/>
                                        <CircularGaugeCap Radius="8" Color="green"/>
                                        <CircularGaugeNeedleTail Length="0%"/>
                                    </CircularGaugePointer>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="25%">
                                        <ContentTemplate>
                                            <div class="annotationText" style="margin-left:-50%">Customized Needle</div>
                                        </ContentTemplate>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px" CenterY="40%">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="270" EndAngle="90" Radius="90%" Minimum="0" Maximum="100">
                                <CircularGaugeAxisLineStyle Width="3" Color="#e3a21a"/>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="1" Height="0.01" Interval="100"/>
                                <CircularGaugeAxisMinorTicks Height="0.01" Width="0.01"/>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Value="80" Radius="80%" MarkerWidth="5" MarkerHeight="5" Color="#e3a21a" PointerWidth="10">
                                        <CircularGaugeCap Radius="8" Color="White">
                                            <CircularGaugeCapBorder Color="#e3a21a" Width="1"/>
                                        </CircularGaugeCap>
                                        <CircularGaugeNeedleTail Length="20%" Color="#e3a21a"/>
                                        <CircularGaugePointerAnimation Enable="true" Duration="1000"/>
                                    </CircularGaugePointer>
                                    <CircularGaugePointer Value="40" Radius="60%" MarkerWidth="5" MarkerHeight="5" Color="#ffb133" PointerWidth="10">
                                        <CircularGaugeCap Radius="8" Color="White">
                                            <CircularGaugeCapBorder Color="#ffb133" Width="1"/>
                                        </CircularGaugeCap>
                                        <CircularGaugeNeedleTail Length="20%" Color="#e3a21a"/>
                                        <CircularGaugePointerAnimation Enable="true" Duration="1000"/>
                                    </CircularGaugePointer>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="25%" >
                                        <ContentTemplate>
                                            <div class="annotationText" style="margin-left:-55%">Multiple Needles</div>
                                        </ContentTemplate>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px" CenterY="40%" @ref="LiveUpdateRef">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="270" EndAngle="90" Radius="90%" Minimum="0" Maximum="100">
                                <CircularGaugeAxisLineStyle Width="0.01"/>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="1" Height="0.01" Interval="100"/>
                                <CircularGaugeAxisMinorTicks Height="0.01" Width="0.01"/>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Value="@LiveUpdatePointer" Radius="100%" Color="#067bc2" PointerWidth="6">
                                        <CircularGaugeCap Radius="0.01"/>
                                        <CircularGaugeNeedleTail Length="4%" Color="#067bc2"/>
                                        <CircularGaugePointerAnimation Enable="false" Duration="100"/>
                                    </CircularGaugePointer>
                                    <CircularGaugePointer Value="@LiveUpdatePointer" Radius="100%" Type="PointerType.RangeBar" Color="#067bc2" PointerWidth="5">
                                        <CircularGaugePointerAnimation Enable="false" Duration="100"/>
                                    </CircularGaugePointer>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="20%">
                                        <ContentTemplate>
                                            <div class="annotationText" style="margin-left:-55%">Live Update</div>
                                        </ContentTemplate>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .annotationText{
        color:#757575;
        font-size:14px;
        font-family:Roboto;
    }
</style>

@code {
    SfCircularGauge NeedleRef;
    SfCircularGauge LiveUpdateRef;
    System.Timers.Timer SyncTimer = null;
    System.Timers.Timer SyncTimer1 = null;
    private double LiveUpdatePointer = 40;
    private double NeedlePointer = 80;
    protected override void OnInitialized()
    {
        SyncTimer1 = new System.Timers.Timer(1000);
        SyncTimer1.Elapsed += this.NeedlePointerUpdate;
        SyncTimer1.AutoReset = true;
        SyncTimer1.Enabled = true;
        SyncTimer = new System.Timers.Timer(1000);
        SyncTimer.Elapsed += this.LiveUpdate;
        SyncTimer.AutoReset = true;
        SyncTimer.Enabled = true;
    }
    Random Random = new Random();
    public void NeedlePointerUpdate(Object source, System.Timers.ElapsedEventArgs e)
    {
        var Number = Random.NextDouble();
        NeedlePointer = (((Number * (90 - 20)) + 20));
        NeedleRef.SetPointerValueAsync(0, 0, NeedlePointer);
    }
    public void LiveUpdate(Object source, System.Timers.ElapsedEventArgs e)
    {
        var Number = Random.NextDouble();
        var Value = (((Number * (80 - 30)) + 30));
        LiveUpdatePointer = Value;
        LiveUpdateRef.SetPointerValueAsync(0, 0, LiveUpdatePointer);
        LiveUpdateRef.SetPointerValueAsync(0, 1, LiveUpdatePointer);
    }
}